/*
 * @Author: jjjjwei 1506865174@qq.com
 * @Date: 2022-08-11 19:49:26
 * @LastEditors: jjjjwei 1506865174@qq.com
 * @LastEditTime: 2022-08-17 14:14:04
 * @FilePath: \bpm-management-system\src\page\Home.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */


import { SoundOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout,Avatar,Dropdown ,Menu,message,Badge } from 'antd';
import React,{useState,useEffect} from 'react';
import {useSelector} from 'react-redux'
import { Outlet,useNavigate } from 'react-router-dom';
import Asider from '../component/Asider'
import './Home.css'
import headerImg from '../assets/images/headerImg.png'
const { Header, Content } = Layout;


const Home = () =>{
  const navigate = useNavigate();
  const {user,list} = useSelector(state=>state.userReducer)
  const [avatar,setAvatar] = useState(headerImg)
  useEffect(()=>{
    // let path = user.userInfo.headerImg
    // setAvatar()
  },[user])
  const clickEvent = ({ key }) => {
    if(key==='1'){
      console.log('账号设置');
       console.log(typeof headerImg);
    }else{
      //清除token
      sessionStorage.removeItem('token');
      //跳转登录页
      message.success('已退出登录')
      navigate('/')
    }
  };
  const menu = (
    <Menu
    onClick={clickEvent}
      items={[
        {
          key: '1',
          label: (<span>账号设置</span>),
        },
        {
          key: '2',
          label: (<span>退出登录</span>),
        },
      ]}
    />
  )
  
  
  function bindMianbaoxie (list){
    return list.map(item=>(<Breadcrumb.Item key={item}>{item}</Breadcrumb.Item>))
  }
   return(
        <Layout style={{height:'100%'}}>
          <Header className="header" style={{backgroundColor:'rgb(48,125,255)',display:'flex',alignItems:'center'}}>
            <div className="logo">BPM管理系统</div>
            <div className='noite'><SoundOutlined />&nbsp;&nbsp;&nbsp;明天晚上10点-12点系统更新，请及时保存数据</div>
            <div className='headerimg'>
              <Dropdown overlay={menu} placement="bottom" arrow>
                <Badge count={1} size='small'><Avatar src={avatar} /></Badge>
              </Dropdown>
            </div>
          </Header>
          <Layout style={{display:'flex'}}>
            <Asider/>
            <Layout style={{padding: '0 24px 24px',overflow:'auto'}}>
              <Breadcrumb style={{margin: '16px 0'}}>
              {bindMianbaoxie(list)}
              </Breadcrumb>
              <Content className="site-layout-background">
                <Outlet/>
              </Content>
            </Layout>
          </Layout>
        </Layout>   
    )
   }



export default Home;
